<template>
	<view>
	<!-- 头部 -->
	<view class="nav_head">
	  <view class="nav_head_image" >
		  <image class="back" src="../../../static/backjiantou.png" @click="navback"></image>
	  </view>
	  <text class="nav_head_text">每日推荐</text>
	  </view>
	<!-- 播放全部 -->
	<view class="nav_all">
		<image class="nav_all_image1" src="../../../static/my_sort/bofang.png"></image>
		<text class="nav_all_text">播放全部</text>
		<image class="nav_all_image2" src="../../../static/quanxuan.png"></image>
	</view>
	<!-- 列表 -->
	<view class="nav_nr" v-for="(item,index) in list" :key="index">
		 <image class="nav_nr_image1" :src="item.al.picUrl"></image>
		<text class="nav_nr_text1">{{item.name}}</text>
		<text class="nav_nr_text2" v-for="(i,index) in item.ar.slice(0,1)">{{i.name}}</text>
		<text class="nav_nr_text3">-{{item.al.name}}</text>
		
		<image class="nav_nr_image2" src="../../../static/bofang3.png"></image>
		<image class="nav_nr_image3" src="../../../static/found/gengduo.png"></image>
	</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[]
			}
			
		},
		mounted(){
			this.getlist()
		},
		methods:{
			getlist(){
				uni.request({
					url:'http://localhost:3000/login/cellphone?phone=15171189697&password=htl240@0815',
					success: (res) => {
						console.log('登录成功')
					}
				}),
				uni.request({
					url:'http://localhost:3000/recommend/songs',
					method:'POST',
					success: (res) => {
						this.list = res.data.data.dailySongs
					}
				})
			},
			navback(){
				uni.navigateBack({
					url:'../../../pages/find/find'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		background-image: linear-gradient(#e7eff2, #f5f5f5);
	}
	//每日推荐
	.nav_head{
		width:700rpx;
		height:100rpx;
		margin:60rpx auto;
		margin-bottom: 0rpx;
		position: relative;
	}
	.nav_head_image{
		width:50rpx;
		height:50rpx;
		position: absolute;
		top:20rpx;
		left:10rpx;
		image{
			width:50rpx;
			height:50rpx;
		}
	}
	.nav_head_text{
		width:200rpx;
		height:50rpx;
		line-height: 50rpx;
		position: absolute;
		top:20rpx;
		left:100rpx;
		font-size:40rpx;
		font-weight: 600;
	}
	//全部播放
	.nav_all{
		width:750rpx;
		height:100rpx;
		background-color: #fff;
		position: relative;
	}
	.nav_all_image1{
		width:40rpx;
		height:40rpx;
		position: absolute;
		top:20rpx;
		left:35rpx;
	}
	
	.nav_all_image2{
		width:40rpx;
		height:40rpx;
		position: absolute;
		top:20rpx;
		right:35rpx;
	}
	.nav_all_text{
		font-weight: 600;
		width:130rpx;
		height:50rpx;
		position: absolute;
		top:20rpx;
		left:100rpx;
		letter-spacing: 1px;
		font-size: 30rpx;
	}
	//列表
	.nav_nr{
		width:750rpx;
		height:130rpx;
		background-color: #fff;
		position: relative;
	}
	.nav_nr_image1{
		width:100rpx;
		height:100rpx;
		position: absolute;
		top:10rpx;
		left:30rpx;
		border-radius: 10rpx;
	}
	.nav_nr_text1{
		width:400rpx;
		height:40rpx;
		position: absolute;
		top:20rpx;
		left:150rpx;
		font-family: "微软雅黑";
		font-weight: 600;
		font-size: 20rpx;
		color: #333333;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
	}
	.nav_nr_text2{
		width:300rpx;
		height:40rpx;
		position: absolute;
		top:60rpx;
		left:150rpx;
		font-size:10rpx;
	}
	.nav_nr_text3{
		width:200rpx;
		height:30rpx;
		position: absolute;
		top:60rpx;
		left:300rpx;
		font-size: 10rpx;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
	}
	.nav_nr_image2{
		width:50rpx;
		height:50rpx;
		position: absolute;
		top:35rpx;
		right:130rpx;
	}
	.nav_nr_image3{
		width:50rpx;
		height:50rpx;
		position: absolute;
		top:35rpx;
		right:30rpx;
	}
</style>
